<template>
    <t-dialog v-model:visible="visible" header="选择分组" width="40%" :confirm-on-enter="true"
        :on-confirm="onConfirmAnother">

        <div style="height: 550px;overflow: auto;">
            <t-input-adornment prepend="搜索:" >
                <t-input v-model="formData.groupName" style="width: 400px;" @change="onGroupNameChange" />
            </t-input-adornment>
            <!-- <t-form>
                <t-form-item label="分组" name="groupName">
                    <t-input v-model="formData.groupName" placeholder="请输入" @change="onGroupNameChange"/>
                  </t-form-item>
            </t-form> -->
            <t-tree style="margin-top: 30px;" :data="materGroupList" :expand-on-click-node="true" :active-multiple="false" activable hover
                transition expand-on-click-node :on-active="onGroupActive" :filter="demo1Filter" />
        </div>


    </t-dialog>
</template>
<script>
    import { ref, onMounted,reactive  } from 'vue'
    import { queryMaterialGroupList,queryMaterialGroup } from '@/service/material';
    import { MessagePlugin } from 'tdesign-vue-next';

    export default {


        setup(props,{emit}) {
            const visible = ref(false)
            const materGroupList = ref([]);
            const selectGroupId = ref()
            const formData = reactive({})
        const demo1Filter = ref(null)

            const loadMaterGroup = async () => {
                materGroupList.value = [];
                const res = await queryMaterialGroupList({});
                if (res) {
                    materGroupList.value = res.dataList;
                    console.log('loadMaterGroup', materGroupList.value);
                }
            };
            

            const onGroupNameChange = (val) => {
                if (formData.groupName) {
                    demo1Filter.value = (node) => {
                        const rs = node.data.label.indexOf(formData.groupName) >= 0;
                        return rs;
                    };
                } else {
                    // 过滤文案为空，则还原 tree 为无过滤状态
                    demo1Filter.value = null;
                }
            }
            const openGroupDialog = () => {
                visible.value = true
                loadMaterGroup()
            }
            const onConfirmAnother =async () => {
                if(!selectGroupId.value){
                    MessagePlugin.error('未选择分组！');
                    return
                }
                console.log('onConfirmAnother');
                const res = await queryMaterialGroup({FID:selectGroupId.value});
                if(res.data){
                    if(res.children && res.children[0]){
                        MessagePlugin.error('分组存在子分组，不可选择！');
                    }else{
                        emit('onConfirm',res.data)
                        visible.value = false
                    }
                }else{
                    MessagePlugin.error('分组不存在！');

                }

            }
            const onGroupActive = (val)=>{
        selectGroupId.value = val[0]
        // console.log('selectGroupId.val:',selectGroupId.val);
      }



            onMounted(() => {
                // loadMaterGroup();
            });

            return {

                visible,demo1Filter, onGroupActive,onGroupNameChange, formData, materGroupList, selectGroupId, onConfirmAnother, openGroupDialog
            }

        }


    }

</script>
<style scoped>
   >>> .t-tree .t-is-active{
    background-color:dodgerblue;
    color: white;
   }


</style>